import {
  useState,
  Fragment // 文档碎片组件
} from 'react'
import './App.css'

// function Demo() {
//   return (
//     // DOM 树多了一层不需要的节点，DOM 解析性能下降，多迭代一层
//     <Fragment>
//       <h1>hello world</h1>
//     </Fragment>
//   )
// }

function Demo({ items }) {
  return items.map(item => (
    <Fragment key={item.id}>
      <h1>{item.title}</h1>
      <p>{item.content}</p>
    </Fragment>
  ))
}

function App() {
  const items = [
    {
      id: 1,
      title: 'title1',
      content: 'content1'
    },
    {
      id: 2,
      title: 'title2',
      content: 'content2'
    }
  ]
  return (
    <>
      <Demo items={items} />
    </>
  )
}

export default App
